<div class="ui-g">
    <div class="ui-g-2 border-spe-right">
        <!--系统层级树-->
        <p-tree [value]="procActTree" selectionMode="single" (onNodeSelect)="nodeSelect($event)"
            [filter]="true" filterMode="strict" [(selection)]="selectedNode" emptyMessage="无数据" [loading]="loading"
            [style]="{'height': 'calc(100% - 75px)','width':'100%','border-style':'none', 'padding':'0'}">
        </p-tree>
    </div>
    <div class="ui-g-10">
        <div class="button-item">
            <button pButton type="text" class="ui-button-success" icon="fa fa-check" (click)="saveUpdate($event)"
                label="保存"></button>
        </div>
        <div class="container">
            <div class="ui-g-4">
                <p-table #dtForm [value]="parts" [scrollable]="true"
                    selectionMode="single" (onRowSelect)="onPartRowSelect($event)" [(selection)]="selectedPart" 
                    [loading]="loading">
                    <ng-template pTemplate="header">
                        <tr>
                            <th>参与者</th>
                        </tr>
                        <tr>
                            <th>
                                <input pInputText type="text" style="width:100%" (input)="dtForm.filter($event.target.value, 'partName', 'contains')">
                            </th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-rowData>
                        <tr [pSelectableRow]="rowData">
                            <td>{{rowData.partName}}</td>
                        </tr>
                    </ng-template>
                </p-table>
            </div>
            <div class="ui-g-4">
                <p-table #dtForm [value]="tabs" [scrollable]="true" [scrollHeight]="scrollHeight"
                    selectionMode="single" (onRowSelect)="onTabRowSelect($event)" [(selection)]="selectedTab"
                    [loading]="loading">
                    <ng-template pTemplate="header">
                        <tr>
                            <th width="70%">标签页</th>
                            <th width="30%" style="text-align:center">选择</th>
                        </tr>
                        <tr>
                            <th width="70%">
                                <input pInputText type="text" style="width:100%" (input)="dtForm.filter($event.target.value, 'name', 'contains')">
                            </th>
                            <th width="30%" style="text-align:center">
                                <p-checkbox binary="true"  [(ngModel)]="allTabSelected" (click)="changeAllTabSelected($event)"></p-checkbox>
                            </th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-rowData>
                        <tr [pSelectableRow]="rowData">
                            <td width="70%">{{rowData.tabName}}</td>
                            <td pEditableColumn width="30%" style="text-align:center">
                                <p-cellEditor>
                                    <ng-template pTemplate="input">
                                        <p-checkbox [(ngModel)]="rowData.selected"
                                            binary="true"></p-checkbox>
                                    </ng-template>
                                    <ng-template pTemplate="output">
                                        <p-checkbox [(ngModel)]="rowData.selected" (onChange)="tabChange(rowData)"
                                            binary="true"></p-checkbox>
                                    </ng-template>
                                </p-cellEditor>
                            </td>
                        </tr>
                    </ng-template>
                </p-table>
            </div>
            <div class="ui-g-4">
                <p-table #dtForm [value]="tabMenus" [scrollable]="true" [scrollHeight]="scrollHeight"
                    selectionMode="single" (onRowSelect)="onTabMenuRowSelect($event)" [(selection)]="selectedTabMenu"
                    [loading]="loading">
                    <ng-template pTemplate="header">
                        <tr>
                            <th width="70%">按钮权限</th>
                            <th width="30%" style="text-align:center">选择</th>
                        </tr>
                        <tr>
                            <th width="70%">
                                <input pInputText type="text" style="width:100%" (input)="dtForm.filter($event.target.value, 'name', 'contains')">
                            </th>
                            <th width="30%" style="text-align:center">
                                <p-checkbox binary="true"  [(ngModel)]="allTabMenuSelected" (click)="changeAllTabMenuSelected($event)"></p-checkbox>
                            </th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-rowData>
                        <tr [pSelectableRow]="rowData">
                            <td width="70%">{{rowData.menuName}}</td>
                            <td pEditableColumn width="30%" style="text-align:center">
                                <p-cellEditor>
                                    <ng-template pTemplate="input">
                                        <p-checkbox [(ngModel)]="rowData.selected"
                                            binary="true"></p-checkbox>
                                    </ng-template>
                                    <ng-template pTemplate="output">
                                        <p-checkbox [(ngModel)]="rowData.selected" (onChange)="tabMenuChange(rowData)"
                                            binary="true"></p-checkbox>
                                    </ng-template>
                                </p-cellEditor>
                            </td>
                        </tr>
                    </ng-template>
                </p-table>
            </div>
        </div>
    </div>
</div>
